<template>
	<!-- 整体容器 -->
	<el-container>

		<!-- 左侧菜单 -->
		<el-aside width="200px">
			<!-- el-menu组件定义router属性，使用 vue-router 的模式，
			启用该模式会在激活导航时以 index 作为path 进行路由跳转。 -->

			<!-- 导航栏折叠 -->



			<el-menu unique-opened default-active="webhome" unique-opened background-color="#304156"
				text-color="#BFCBD9" style="border-right: none;" active-text-color="#ffd04b" router>

				<!-- 网站主页 -->
				<el-menu-item index="webhome">
					<i class="el-icon-s-home"></i>
					<span slot="title">网站主页</span>
				</el-menu-item>

				<!-- 小区管理 -->
				<el-menu-item index="community">
					<i class="el-icon-menu"></i>
					<span slot="title">小区管理</span>
				</el-menu-item>

				<!-- 帮买及废品回收 -->
				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-delete"></i>
						<span>帮买及废品回收</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="store">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>门店管理</span>
							</template>
						</el-menu-item>
						<el-menu-item index="yizhan">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>驿站管理</span>
							</template>
						</el-menu-item>
						<el-menu-item index="goods">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>商品管理</span>
							</template>
						</el-menu-item>
						<!-- <el-menu-item index="2-4">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>订单管理</span>
							</template>
						</el-menu-item> -->
					</el-menu-item-group>
				</el-submenu>


				<!-- 胖虎甄选 -->
				<el-submenu index="3">
					<template slot="title">
						<i class="el-icon-goods"></i>
						<span>胖虎甄选</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="tiger">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>商品管理</span>
							</template>
						</el-menu-item>
						<el-menu-item index="3-2">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>订单管理</span>
							</template>
						</el-menu-item>
						<el-menu-item index="3-3">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>售后订单</span>
							</template>
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>


				<!-- 胖虎家政 -->
				<el-submenu index="4">
					<template slot="title">
						<i class="el-icon-phone"></i>
						<span>胖虎家政</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="4-1">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>家政服务</span>
							</template>
						</el-menu-item>
						<el-menu-item index="4-2">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>订单管理</span>
							</template>
						</el-menu-item>
						<el-menu-item index="4-3">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>售后订单</span>
							</template>
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>

				<!-- 用户管理 -->
				<el-menu-item index="5">
					<i class="el-icon-s-custom"></i>
					<span slot="title">用户管理</span>
				</el-menu-item>

				<!-- 骑手管理 -->
				<el-menu-item index="6">
					<i class="el-icon-s-order"></i>
					<span slot="title">骑手管理</span>
				</el-menu-item>

				<!-- 家政管理 -->
				<el-menu-item index="7">
					<i class="el-icon-bell"></i>
					<span slot="title">家政管理</span>
				</el-menu-item>

				<!-- 新用户红包 -->
				<el-menu-item index="8">
					<i class="el-icon-present"></i>
					<span slot="title">新用户红包</span>
				</el-menu-item>

				<!-- 类目管理 -->
				<el-menu-item index="9">
					<i class="el-icon-s-platform"></i>
					<span slot="title">类目管理</span>
				</el-menu-item>


			</el-menu>
		</el-aside>

		<!-- 右侧菜单 -->
		<el-container>

			<!-- 右侧上部 -->
			<!-- <el-row class="headbg"> -->
			<el-header>
				<el-header>
					<div class="headbg">
						<div class="header-left">
							<!-- <el-button class="el-icon-s-fold hiddle"></el-button> -->
							<i class="el-icon-s-fold icon"></i>
						</div>
						<div class="header-right">
							<!-- @command：是函数，专门处理下拉框中的请求事件的  -->
							<el-dropdown trigger="click">
								<span class="el-dropdown-link">
									<img src="../assets/logo.png" alt=""> 你好, 静香
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
									<el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
									<el-dropdown-item command="system">系统设置</el-dropdown-item>
									<el-dropdown-item command="logout">退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
				</el-header>
			</el-header>
			<!-- </el-row> -->
			<!-- </div> -->

			<!-- 右侧下部主题 -->
			<el-main>
				<!-- 路由占位符 -->
				<router-view></router-view>
			</el-main>

		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
			}
		
	}
</script>

<style>
	.el-container {
		height: 100vh;
	}

	.el-aside {
		width: 210px !important;
		background-color: #304156;
		height: 100%;
	}

	.el-header {
		height: 60px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
		background-color: rosybrown;
		border-radius: 9px;
	}

	.header-left {
		float: left;
	}

	.header-left .icon {
		font-size: 26px;
		padding-top: 17px;
		cursor: pointer;
	}

	.el-dropdown-link {
		cursor: pointer;
	}

	.header-right {
		float: right;
		line-height: 60px;
	}

	.header-right img {
		height: 50px;
		vertical-align: middle;
	}

	.el-main {
		background-color: burlywood;
	}

	.headbg {

		background-color: burlywood;
	}


	/* .header-left .hiddle{
	border: none;
	background-color: rosybrown;
	font-size: 26px;
	padding-top: 17px;
	cursor: pointer;
	}
	.header-left .hiddle:hover{
		background-color:rosybrown ;
	} */
</style>